<!DOCTYPE html>
<html>
<head>
	<title>评论-详情</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="static/common/bootstrap/css/bootstrap.min.css">
     <script src="static/common/jquery-3.3.1.min.js" charset="utf-8"></script>
</head>
<style type="text/css">
	*{
		margin: 0;
		padding: 0;
		list-style: none;
	}
	body{
		background: #f7f7f7;	
	}
	.comment_detail{
	 width: 700px;
    background: #fff;
    margin-left: 25%;
    height: 1200px;
    position: absolute;
	}
	.arti_title{
    width: 400px;
    margin-top: 38px;
    position: absolute;
    height: 40px;
    font-size: 24px;
    font-weight: 600;
	}
	.comment_count{
	right: 75px;
    top: 118px;
    position: absolute;
    font-weight: 400;
	}
	.content_detail{
		border: 1px solid #f7f7f7;
    position: absolute;
    margin-top: 140px;
    width: 659px;
    margin-left: 25px;
    height: 800px;
	}
	.iComment{
    height: 50px;
    width: 623px;
    margin-top: 30px;
	}
	.comment_button{
	 margin-left: 570px;
    margin-top: 52px;
    position: absolute;
	}
	.content{
    margin-top: 10px;
    height: 60px;
        border-bottom: 1px solid #f7f7f7;
	}
	.user_head{
    width: 25px;
    height: 24px;
    position: relative;
	}
	.user_name{
    width: 300px;
    position: absolute;
    margin-top: -23px;
    margin-left: 30px;
	}
	.comment_date{
    position: relative;
    float: right;
    margin-top: -20px;
    width: 78px;
	}
	.comment_content{
    height: 32px;
    margin-top: 2px;
        padding-top: 6px;
	}
	.myComment{
	 width: 450px;
    height: 38px;
    margin-left: 20px;
    font-size: 15px;
	}
</style>
<body>
<div class="comment_detail">
	<div class="arti_title" id="arti_title">
		
	</div>
	<a class="comment_button" href="#goComment">我要评论</a>
	<div class="comment_count" id="comment_count">
		
	</div>
	<div class="content_detail" id="content_detail">
		<div id="goComment" class="iComment">
			<input type="text" placeholder="写下你的评论..." name="myComment" id="myComment" class="myComment" onclick="init()">
			  <button onclick="comment()" type="button" class="btn btn-primary active btn-sm">评论</button>
		</div>
	</div>
	
</div>
<script type="text/javascript">
	var uId;
	var article_id;
		window.onload=function () {
			 article_id =  window.location.search.split("=")[1];
			getAllComment(article_id);
			
		}
		function getAllComment(article_id) {
			fetch("/article_module/getCommentByArtiId/"+article_id,{
				method :"POST",
				headers :{
 				"Content-Type": "application/JSON"
				}
			}).then(res=>res.json()).catch(error=>console.log(error))
			.then(function (response) {
				if (response.status==200) {
					romance(response.data);
				}
			});
		}
		function getUserInfo() {
			fetch("/user_module/getUserMsg",{
                method: "GET",
                headers: {
                "Content-Type": "application/JSON"
            }
             }).then(res => res.json()).catch(error => console.error(error))
                    .then(function(response){
              if(response.status=='401'){
                  window.location.href="sign-inOrOut.html";
              }else if(response.status=='200'){
                     uId=response.data.uId;
                }
              });
		}
		function romance(data) {
			$("#arti_title").html(data[0].articleInfo.articleTitle);
			$("#comment_count").html(`${data[0].articleInfo.totalComment}条评论`);
			for (var i = 0; i < data.length; i++) {
				$(".content_detail").prepend(`
			<div class="content">
			<div class="user_head"><img style="width:25px;height:25px" src="static/system/img/${data[i].userInfo.uHeadimg}"></div>
			<div class="user_name">${data[i].userInfo.uName}</div>
			<div class="comment_date">${data[i].commentDate}</div>
			<div class="comment_content">${data[i].commentContent}</div>
			</div>
			`);
			}
		}
		function init() {
			getUserInfo();
		}
		function comment() {
			var myComment= $("#myComment").val();
/*			alert(uId+myComment+article_id);*/
			fetch("/article_module/addComment/"+uId+"/"+myComment+"/"+article_id,{
				method :"POST",
				headers : {
                'Content-Type': 'application/json;charset=utf-8'
              }
				
			}).then(res=>res.json()).catch(error=>console.log(error))
			.then(function (response) {
				if (response.status==200) {
					var data=response.data;
					$(".content_detail").prepend(`
						<div class="content">
			<div class="user_head"><img style="width:25px;height:25px" src="static/system/img/${data.userInfo.uHeadimg}"></div>
			<div class="user_name">${data.userInfo.uName}</div>
			<div class="comment_date">${data.commentDate}</div>
			<div class="comment_content">${data.commentContent}</div>
			</div>
						`);
					alert("评论成功");
					window.location.href="index.html";
				}
			});
		}
	</script>
</body>
</html>